<template>
  <div class="dept__wrapeer">
    <!-- s搜索 -->
    <div class="dept__top">
      <el-form :inline="true" :model="queryFrom" ref="queryForm">
        <el-form-item label="操作人员" prop="userName">
          <el-select
            v-model="queryFrom.userName"
            filterable
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="deptName">
          <el-input
            type="text"
            placeholder="搜索店铺名"
            v-model="queryFrom.deptName"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userQuery">查询</el-button>
          <el-button type="primary" @click="resetForm('queryForm')"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            action="/api/single/upload"
            :with-credentials="true"
            :on-success="uploadSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="addCreate">加单</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="exportExcel"> 导出 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="user__bottom">
      <el-scrollbar height="700px">
        <el-table
          show-summary
          :data="tableData"
          style="width: 100%"
          :row-style="{ padding: 0, margin: 0 }"
          :cell-style="{ padding: 0, margin: 0 }"
        >
          <el-table-column type="index" :index="indexMethod"> </el-table-column>
          <el-table-column
            v-for="item in tabCloum"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
                >还单</el-button
              >
              <el-button
                size="mini"
                type="info"
                @click="handleUpdate(scope.row)"
                >更新</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 表格结束 -->
  </div>
  <!-- 还单 -->
  <el-dialog title="还单" v-model="dialogFormVisible" width="400px">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      ref="formInline"
    >
      <el-form-item label="原有人员" prop="yuaUser">
        <el-input
          v-model="formInline.userName"
          :required="true"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="还单店铺" prop="deptName" :required="true">
        <el-input v-model="formInline.deptName" disabled></el-input>
      </el-form-item>
      <el-form-item label="当前单量" prop="deptCount" :required="true">
        <el-input v-model="formInline.deptCount" disabled></el-input>
      </el-form-item>
      <el-form-item label="被还单人员" prop="updateName" :required="true">
        <el-select
          v-model="formInline.updateName"
          filterable
          placeholder="可搜索"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="要还单量" prop="updateCount" :required="true">
        <el-input v-model="formInline.updateCount"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handeHuan">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 还单结束 -->
  <!-- 更新 -->
  <el-dialog title="更新" v-model="dialogFormUpdate" width="400px">
    <el-form
      :inline="true"
      :model="formUpdate"
      class="demo-form-inline"
      ref="formInline"
    >
      <el-form-item label="店铺" prop="deptName" :required="true">
        <el-input v-model="formUpdate.deptName"></el-input>
      </el-form-item>
      <el-form-item label="人员" prop="userName">
        <el-select
          v-model="formUpdate.userName"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单量" prop="yuaUser">
        <el-input v-model="formUpdate.deptCount" :required="true"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormUpdate = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitUpdate">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 更新 -->
  <!-- 加单-->
  <el-dialog title="加单" v-model="dialogFormCreate" width="400px">
    <el-form
      :inline="true"
      :model="formUpdate"
      class="demo-form-inline"
      ref="formCreate"
    >
      <el-form-item label="店铺" prop="deptName" :required="true">
        <el-input v-model="formUpdate.deptName"></el-input>
      </el-form-item>
      <el-form-item label="人员" prop="userName">
        <el-select
          v-model="formUpdate.userName"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单量" prop="yuaUser">
        <el-input v-model="formUpdate.deptCount" :required="true"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormCreate = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitCreate">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import exportExcelCsv from 'export-excel-csv'
export default {
  name: 'Single',
  data () {
    return {
      dialogFormVisible: false,
      dialogFormUpdate: false,
      dialogFormCreate: false,
      queryFrom: {},
      formUpdate: {},
      formInline: {
      },
      options: [
        {
          value: '周剑涛',
          label: '周剑涛',
        },
        {
          value: '郭倩',
          label: '郭倩',
        },
        {
          value: '陈俊超',
          label: '陈俊超',
        },
        {
          value: '吴航宇',
          label: '吴航宇',
        },
        {
          value: '婷婷',
          label: '婷婷',
        },
        {
          value: '莎莎',
          label: '莎莎',
        },
        {
          value: '刘能盛',
          label: '刘能盛',
        },
        {
          value: '吕宁',
          label: '吕宁',
        },
        {
          value: '陈胜',
          label: '陈胜',
        },
        {
          value: '朱新佐',
          label: '朱新佐',
        },
        {
          value: '程清蝶',
          label: '程清蝶',
        },
        {
          value: '邱群',
          label: '邱群',
        },
        {
          value: '杨洪华',
          label: '杨洪华',
        },
        {
          value: '杨琴',
          label: '杨琴',
        },
        {
          value: '朱梦娇',
          label: '朱梦娇',
        },
        {
          value: '吕诗燕',
          label: '吕诗燕',
        },
        {
          value: '杨梦玲',
          label: '杨梦玲',
        },
        {
          value: '魏康',
          label: '魏康',
        },
        {
          value: '吕思齐',
          label: '吕思齐',
        },
        {
          value: '吕挺',
          label: '吕挺',
        },
        {
          value: '叶彬彬',
          label: '叶彬彬',
        },
        {
          value: '潘先秀',
          label: '潘先秀',
        },
        {
          value: '陈梦洁',
          label: '陈梦洁',
        },
        {
          value: '胡菲菲',
          label: '胡菲菲',
        },
        {
          value: '施艳阳',
          label: '施艳阳',
        },
        {
          value: '周赛婉',
          label: '周赛婉',
        },
        {
          value: '陈思阳',
          label: '陈思阳',
        },
        {
          value: '项赋杰',
          label: '项赋杰',
        },
        {
          value: '胡豪杰',
          label: '胡豪杰',
        },
        {
          value: '章秋童',
          label: '章秋童',
        },
        {
          value: '周晓益',
          label: '周晓益',
        },
        {
          value: '吴冰焱',
          label: '吴冰焱',
        },
      ],
      value: '',
      // 分页参数
      page: {
        pageNum: 1,
        pageSize: 30,
      },
      tabCloum: [
        {
          label: "操作人员",
          prop: "userName"
        },
        {
          label: "店铺名",
          prop: "deptName"
        },
        {
          label: '表格登记数量',
          prop: 'deptCount'
        }
      ],
      tableData: [],
      dataList: [],
    }
  },
  methods: {
    /**
     * @type 表单重置
     */
    resetForm (form) {
      this.$refs[form].resetFields();
    },
    /**
     * @type 条件查询
     */
    userQuery () {
      this.getSingleData()
    },
    /**
     * @type 分页点击事件
     */
    handleCurrentChange (curren) {
      this.page.pageNum = curren
      this.getSingleData()
    },
    /** 初始化获取数据 */
    async getSingleData () {
      let params = { ...this.queryFrom, ...this.page }
      const { list, page } = await this.$api.getSingleList(params)
      this.page.total = page.total
      this.tableData = list
    },
    /** 还单 */
    handleEdit (row) {
      // this.resetForm('formInline')
      this.dialogFormVisible = true
      this.$nextTick(() => {
        Object.assign(this.formInline, row)
      })
    },
    /** 提交还单 */
    async handeHuan () {
      let params = { ...this.formInline }
      await this.$api.submitUpdateSingle(params)
      this.dialogFormVisible = false
      this.getSingleData()
      this.$message('操作成功')
    },
    /** 删除 */
    async handleDelete (row) {
      let params = { ...row }
      try {
        await this.$api.submitDeleteSingle(params)
        this.getSingleData()
        this.$message.success('删除成功')
      } catch (error) {
        throw new Error(error)
      }
    },
    /** 加单 */
    addCreate () {
      this.dialogFormCreate = true
      this.resetForm('formCreate')
    },
    /** 提交加单 */
    async handleSubmitCreate () {
      let params = { ...this.formUpdate }
      try {
        const res = await this.$api.submiteAddCreateSing(params)
        this.dialogFormCreate = false
        this.getSingleData()
        this.$message.success(res.msg)
      } catch (error) {
        throw new Error(error)
      }
    },
    /** 更新 */
    handleUpdate (row) {
      this.dialogFormUpdate = true
      this.$nextTick(() => {
        Object.assign(this.formUpdate, row)
      })
    },
    /** 提交更新 */
    async handleSubmitUpdate () {
      let params = { ...this.formUpdate }
      try {
        await this.$api.submitChangeSingle(params)
        this.dialogFormUpdate = false
        this.getSingleData()
        this.$message.success('更改成功')
      } catch (error) {
        throw new Error(error)
      }
    },
    /** 获取全部 */
    async getAllList () {
      const res = await this.$api.getAllgeSingle()
      this.dataList = res
    },
    async exportExcel () {
      await this.getAllList()
      let heads = {
        userName: '操作人员',
        deptName: '店铺名',
        deptCount: '单量'
      }
      exportExcelCsv(heads, this.dataList, `导出.xlsx`)
    },
    /** 导入成功时 */
    uploadSuccess () {
      this.getSingleData()
      this.$message.success('导入成功')
    }
  },
  mounted () {
    this.getSingleData()
  },
}
</script>
<style lang="scss" scoped>
.dept__wrapeer {
  background: #fff;
}
.dept__top {
  height: 0.8rem;
  padding: 0.24rem;
  border-bottom: 0.01rem solid #ebeef1;
}
.user__bottom {
  background: #ebeef1;
  padding-top: 0.3rem;
  .active {
    background: #fff;
    padding: 0.27rem;
  }
  .pages {
    text-align: right;
    padding: 0.1rem 0.27rem;
    background: #fff;
  }
}
</style>